import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/components/GedanModalBottomSheet.dart';
import 'package:freemusic/model/Gedan.dart';
import 'package:freemusic/page/songsheet/SongSheet.dart';
import 'package:freemusic/stores/GedanStores.dart';
import 'package:freemusic/utils/Util.dart';

class SongSheetWidget extends StatefulWidget {
  final double height;
  final double width;

  SongSheetWidget({this.height, this.width});

  @override
  State<StatefulWidget> createState() {
    return SongSheetState();
  }
}

class SongSheetState extends State<SongSheetWidget>
    with StoreWatcherMixin<SongSheetWidget> {
  GedanStore gedanStore;

  @override
  void initState() {
    super.initState();
    gedanStore = listenToStore(gedanToken);
  }

  @override
  Widget build(BuildContext context) {
    List<Gedan> gedanList = gedanStore.gedanList;
    return Container(
      child: ListView.builder(
        itemCount: gedanList.length,
        itemBuilder: (context, index) {
          Gedan item = gedanList[index];
          
          return SongSheetItem(item);
        },
      ),
    );
  }
}

class SongSheetItem extends StatelessWidget {

  final Gedan _gedan;
  final double _size = 50.0;


  SongSheetItem(this._gedan);

  void _handleOnLongPress(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return GedanModalBottomSheet(this._gedan);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    String image = this._gedan.picture;
    String gedanName = this._gedan.gdName;
    String description = "${this._gedan.count} 首";
    
    if(description == null){
      description = "0 首";
    }
    return InkWell(
      onLongPress: () {
        this._handleOnLongPress(context);
      },
      onTap: () {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => SongSheetPage(gedanName)));
      },
      child: Container(
        height: 68,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(
                left: 4.0,
                right: 10.0,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12.0),
                child: image == null || image.isEmpty ? Image.asset("images/sheet.png", width: _size,) :
                FadeInImage.assetNetwork(
                  placeholder: "images/sheet.png",
                  image: "https://picsum.photos/50/50",
                  width: _size,
                ),
              ),
            ),
            Expanded(
              child: Column(
                children: <Widget>[
                  Text(gedanName),
                  Text(description),
                ],
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
              ),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Util.wordColor,
            ),
          ],
        ),
      ),
    );
  }
}
